/**
 * Created by gouyuheng on 2017/3/15.
 * 基于vue的业务共通组件，必须在vue和element引入之后引入
 */
(function (Vue) {
    // 选择商品共通
    var selectItem = Vue.extend({
        template: "<el-dialog title='选择商品' v-model='itemCommonDialog' size='large' :show-close='false' :close-on-click-modal='false'><el-row :gutter='20'>" +
        "<el-col :span='15' style='height: 540px'><el-row>" +
        "<el-card class='box-card'><el-form><el-row><el-form-item label='商品搜索'><el-input v-model='keyword' style='width: 200px'></el-input></el-form-item></el-row>" +
        "<el-row><div style='text-align: right'><el-button type='primary' @click.native.prevent='getList'>查询</el-button>" +
        "<el-button @click.native.prevent='clearSearch'>清空查询</el-button></div>" +
        "</el-row></el-form></el-card></el-row><el-row><el-card class='box-card' style='margin-top: 10px'>" +
        "<div slot='header' class='clearfix'><span style='line-height: 36px;'>商品列表</span></div>" +
        "<div><el-table ref='test' :data='tableData' border style='width: 100%' @select='handleSelectionChange' @select-all='handleSelectionAll'>" +
        "<el-table-column type='selection' align='center' width='50'></el-table-column>" +
        "<el-table-column inline-template label='序号' align='center' width='80'><div>{{ $index+pageSize*(currentPage-1)+1 }}</div></el-table-column>" +
        "<el-table-column prop='name' show-overflow-tooltip label='名称'></el-table-column>" +
        "<el-table-column prop='orgName' show-overflow-tooltip label='商家'></el-table-column>" +
        "<el-table-column prop='typeName' label='类别'></el-table-column>" +
        "<el-table-column prop='status' :formatter='changeChecked' label='状态'></el-table-column>" +
        "</el-table><el-pagination @current-change='handleCurrentPageChange' :current-page='currentPage' :page-size='pageSize' layout='total, prev, pager, next' :total='totalCount'>" +
        "</el-pagination></div></el-card></el-row></el-col><el-col :span='9' style='height: 540px'><el-card style='height: 535px' class='box-card'><el-table border :data='checkedData'>" +
        "<el-table-column type='index' label='序号' align='center' width='80'></el-table-column>" +
        "<el-table-column prop='name' show-overflow-tooltip label='名称'></el-table-column>" +
        "<el-table-column prop='orgName' show-overflow-tooltip label='商家'></el-table-column>" +
        "<el-table-column label='操作' inline-template align='center'><el-button size='mini' type='primary' @click.native.prevent='deleteItem(row.id)'>删除</el-button></el-table-column>" +
        "</el-table></el-card></el-col></el-row><el-row style='margin-top: 10px'><div style='text-align: center'>" +
        "<el-button type='primary' @click.native.prevent='saveCallback'>保存</el-button><el-button @click.native.prevent='cancelCallback'>取消</el-button></div></el-row></el-dialog>",
        props: {
            itemCommonDialog: {
                type: Boolean,
                default: false
            },
            limitNum: Number,
            checkedIds: {
                type: Array,
                default () {
                    return []
                }
            },
            checkList: {
                type: Array,
                default () {
                    return []
                }
            },
            saveCallback: {
                type: Function,
                required: true
            },
            cancelCallback: {
                type: Function,
                required: true
            }
        },
        watch: {
            itemCommonDialog: function (val, oldVal) {
                this.checked = this.checkedIds;
                if (this.checkList.length !== 0) {
                    this.checkedData = this.checkList;
                } else {
                    this.getCheckedData();
                }
                this.getList();
            }
        },
        mounted: function () {
            this.getList();
            if (this.checkList.length !== 0) {
                this.checkedData = this.checkList;
            } else {
                this.getCheckedData();
            }
        },
        data: function () {
            return {
                currentPage: 1,
                pageSize: 5,
                totalCount: 0,
                keyword: '',
                tableData: [],
                checked: this.checkedIds,
                checkedData: [],
                oldValue: []
            }
        },
        methods: {
            handleSelectionAll (val) {
                let that = this;
                if (val.length !== 0) { // 即全选
                    if (that.checked.length + val.length > this.limitNum) {
                        this.$message.error('最多选择' + this.limitNum + "个商品");
                        this.$nextTick(function () {
                            $(".el-checkbox__input")[0].click();
                        })
                        return;
                    }
                    val.forEach(function (item) {
                        if (that.checked.indexOf(item.id) === -1) {
                            that.checked.push(item.id);
                            that.checkedData.push(item);
                        }
                    })
                } else { // 即取消全选
                    let selectedIds = [];
                    that.tableData.forEach(function (data) {
                        selectedIds.push(data.id);
                    });
                    let newCheckedData = that.checkedData.filter(function (item) {
                        return selectedIds.indexOf(item.id) === -1;
                    });
                    that.checkedData = newCheckedData;
                    let newChecked = that.checked.filter(function (item) {
                        return selectedIds.indexOf(item) === -1;
                    });
                    that.checked = newChecked;
                }
            },
            getCheckedData () {
                let that = this;
                if (this.checkedIds.length === 0) {
                    return;
                }
                this.http("/item/listByItemId", {ids: this.checkedIds}, function (res) {
                    if (res.status === 200) {
                        that.checkedData = res.data.list;
                    } else {
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                }, function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            handleSelectionChange (val, row) {
                let that = this;
                let event = window.event;
                if (event.currentTarget.checked) { // 即选中
                    if (that.checked.length + 1 > this.limitNum) {
                        this.$message.error('最多选择' + this.limitNum + "个商品");
                        this.$nextTick(function () {
                            that.$refs.test.toggleRowSelection(row, false);
                        })
                        return;
                    }
                    val.forEach(function (item) {
                        if (that.checked.indexOf(item.id) === -1) {
                            that.checked.push(item.id);
                            that.checkedData.push(item);
                        }
                    })
                } else { // 即取消选中
                    if (that.checked.indexOf(row.id) !== -1) {
                        let newCheckedData = that.checkedData.filter(function (item) {
                            return item.id !== row.id;
                        });
                        that.checkedData = newCheckedData;
                        let newChecked = that.checked.filter(function (item) {
                            return item !== row.id;
                        });
                        that.checked = newChecked;
                    }
                }
            },
            changeChecked (row, column) {
                let that = this;
                for (let i = 0; i < this.checked.length; i++) {
                    if (row.id === this.checked[i]) {
                        that.$refs.test.toggleRowSelection(row, true);
                    }
                }
                return row.statusName;
            },
            handleCurrentPageChange (val) {
                this.currentPage = val;
                this.getList();
            },
            deleteItem (id) {
                let that = this;
                let checkedIds = this.checked.filter(function (item) {
                    return item !== id;
                })
                let checkedData = this.checkedData.filter(function (item) {
                    return item.id !== id;
                })
                this.checked = checkedIds;
                this.checkedData = checkedData;
                this.getList();
            },
            clearSearch () {
                this.keyword = "";
                this.getList();
            },
            getList () {
                let that = this
                let obj = {
                    kind: '',
                    orgId: '',
                    status: 4,
                    soldCountLow: '',
                    soldCountHigh: '',
                    name: this.keyword,
                    currentPage:this.currentPage,
                    pageSize: this.pageSize,
                    isAll: 0
                }
                this.http('/item/list',obj,function (res) {
                    if(res.status === 200){
                        that.tableData = res.data.list;
                        that.totalCount = res.data.total;
                    }else{
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            }
        }
    });
    Vue.component("yiqi-select-item", selectItem);

    // 选择专题共通
    var selectSpecial = Vue.extend({
        template: "<el-dialog :title='title' v-model='itemCommonDialog' :show-close='false' :close-on-click-modal='false'><el-row :gutter='20'>" +
        "<el-col :span='13' style='height: 540px'><el-row>" +
        "<el-card class='box-card'><el-form><el-row><el-form-item label='专题搜索'><el-input v-model='keyword' style='width: 200px'></el-input></el-form-item></el-row>" +
        "<el-row><div style='text-align: right'><el-button type='primary' @click.native.prevent='doSearch'>查询</el-button>" +
        "<el-button @click.native.prevent='clearSearch'>清空查询</el-button></div>" +
        "</el-row></el-form></el-card></el-row><el-row><el-card class='box-card' style='margin-top: 10px'>" +
        "<div slot='header' class='clearfix'><span style='line-height: 36px;'>专题列表</span></div>" +
        "<div><el-table ref='test' :data='specialList' border style='width: 100%' @select='handleSelectionChange' @select-all='handleSelectionAll'>" +
        "<el-table-column type='selection' align='center' width='40'></el-table-column>" +
        "<el-table-column inline-template label='序号' align='center' width='80'><div>{{ $index+pageSize*(currentPage-1)+1 }}</div></el-table-column>" +
        "<el-table-column prop='name' show-overflow-tooltip label='名称'></el-table-column>" +
        "<el-table-column prop='enable' :formatter='changeChecked' label='状态'></el-table-column>" +
        "</el-table><el-pagination @current-change='handleCurrentPageChange' :current-page='currentPage' :page-size='pageSize' layout='total, prev, pager, next' :total='totalCount'>" +
        "</el-pagination></div></el-card></el-row></el-col><el-col :span='11' style='height: 540px'><el-card style='height: 535px' class='box-card'><el-table border :data='checkedData'>" +
        "<el-table-column type='index' label='序号' align='center' width='80'></el-table-column>" +
        "<el-table-column prop='name' show-overflow-tooltip label='名称'></el-table-column>" +
        "<el-table-column prop='enable' :formatter='changeEnable' show-overflow-tooltip label='状态'></el-table-column>" +
        "<el-table-column label='操作' inline-template align='center'><el-button size='mini' type='primary' @click.native.prevent='deleteSpecial(row.id)'>删除</el-button></el-table-column>" +
        "</el-table></el-card></el-col></el-row><el-row style='margin-top: 10px'><div style='text-align: center'>" +
        "<el-button type='primary' @click.native.prevent='saveCallback'>保存</el-button><el-button @click.native.prevent='cancelCallback'>取消</el-button></div></el-row></el-dialog>",
        props: {
            itemCommonDialog: {
                type: Boolean,
                default: false
            },
            limitNum: Number,
            checkedIds: {
                type: Array,
                default () {
                    return []
                }
            },
            type: { // 专题类型 0：分类专题  1：自定义专题
                type: Number,
                default: 0
            },
            title: {
                type: String,
                default: '选择分类专题'
            },
            checkList: {
                type: Array,
                default () {
                    return []
                }
            },
            saveCallback: {
                type: Function,
                required: true
            },
            cancelCallback: {
                type: Function,
                required: true
            }
        },
        mounted: function () {
            if (this.type === 0) {
                this.getTypeList();
            } else {
                this.getList();
            }
        },
        data: function () {
            return {
                currentPage: 1,
                pageSize: 5,
                totalCount: 0,
                keyword: '',
                specialList: [],
                checked: this.checkedIds,
                checkedData: this.checkList,
                oldValue: []
            }
        },
        methods: {
            handleSelectionAll (val) {
                let that = this;
                if (val.length !== 0) { // 即全选
                    if (that.checked.length + val.length > this.limitNum) {
                        this.$message.error('最多选择' + this.limitNum + "个专题");
                        this.$nextTick(function () {
                            $(".el-checkbox__input")[0].click();
                        })
                        return;
                    }
                    val.forEach(function (item) {
                        if (that.checked.indexOf(item.id) === -1) {
                            that.checked.push(item.id);
                            that.checkedData.push(item);
                        }
                    })
                } else { // 即取消全选
                    let selectedIds = [];
                    that.specialList.forEach(function (data) {
                        selectedIds.push(data.id);
                    });
                    let newCheckedData = that.checkedData.filter(function (item) {
                        return selectedIds.indexOf(item.id) === -1;
                    });
                    that.checkedData = newCheckedData;
                    let newChecked = that.checked.filter(function (item) {
                        return selectedIds.indexOf(item) === -1;
                    });
                    that.checked = newChecked;
                }
            },
            handleSelectionChange (val, row) {
                let that = this;
                let event = window.event;
                if (event.currentTarget.checked) { // 即选中
                    if (that.checked.length + 1 > this.limitNum) {
                        this.$message.error('最多选择' + this.limitNum + "个专题");
                        this.$nextTick(function () {
                            that.$refs.test.toggleRowSelection(row, false);
                        })
                        return;
                    }
                    val.forEach(function (item) {
                        if (that.checked.indexOf(item.id) === -1) {
                            that.checked.push(item.id);
                            that.checkedData.push(item);
                        }
                    })
                } else { // 即取消选中
                    if (that.checked.indexOf(row.id) !== -1) {
                        let newCheckedData = that.checkedData.filter(function (item) {
                            return item.id !== row.id;
                        });
                        that.checkedData = newCheckedData;
                        let newChecked = that.checked.filter(function (item) {
                            return item !== row.id;
                        });
                        that.checked = newChecked;
                    }
                }
            },
            deleteSpecial (id) {
                let that = this;
                let checkedIds = this.checked.filter(function (item) {
                    return item !== id;
                })
                let checkedData = this.checkedData.filter(function (item) {
                    return item.id !== id;
                })
                this.checked = checkedIds;
                this.checkedData = checkedData;
                if (this.type === 0) {
                    this.getTypeList();
                } else {
                    this.getList();
                }
            },
            changeEnable (row, column) {
                if (row.enable === 0) {
                    return "禁用";
                } else {
                    return "启用";
                }
            },
            changeChecked (row, column) {
                let that = this;
                for (let i = 0; i < this.checked.length; i++) {
                    if (row.id === this.checked[i]) {
                        that.$refs.test.toggleRowSelection(row, true);
                    }
                }
                if (row.enable === 0) {
                    return "禁用";
                } else {
                    return "启用";
                }
            },
            handleCurrentPageChange (val) {
                this.currentPage = val;
                if (this.type === 0) {
                    this.getTypeList();
                } else {
                    this.getList();
                }
            },
            clearSearch () {
                this.keyword = "";
                if (this.type === 0) {
                    this.getTypeList();
                } else {
                    this.getList();
                }
            },
            doSearch () {
                if (this.type === 0) {
                    this.getTypeList();
                } else {
                    this.getList();
                }
            },
            getList () {
                let that = this
                let obj = {
                    insertTimeEnd: '',
                    insertTimeStart: '',
                    enable:'',
                    name: this.keyword,
                    currentPage:this.currentPage,
                    pageSize: this.pageSize,
                    isAll: 0
                }
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http('/special/list',obj,function (res) {
                    if(res.status === 200){
                        that.specialList = res.data.list
                        that.totalCount = res.data.total
                        loading.close();
                    }else{
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                },function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            getTypeList () {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                let obj = {
                    name: this.keyword,
                    insertTimeStart: '',
                    insertTimeEnd: '',
                    enable: '',
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    isAll: 0
                }
                this.http("/special/type/list", obj, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.specialList = res.data.list;
                        that.totalCount = res.data.total
                    } else {
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            }
        }
    });
    Vue.component("yiqi-select-special", selectSpecial);

    // 审核共通
    var examine = Vue.extend({
        template: "<el-dialog :title='title' v-model='examineDialog' size='tiny' :show-close='false' :close-on-click-modal='false'>" +
        "<el-card style='margin-bottom: 10px' v-if='historyResult.length !== 0' class='box-card' v-for='item in historyResult'><div slot='header' class='clearfix'>" +
        "<span style='line-height: 36px'>{{item.header}}</span></div>" +
        "<el-form :inline='true' :label-width='labelWidth'><el-form-item label='审核人:'>{{item.user}}</el-form-item>" +
        "<el-form-item label='审核时间:'>{{item.createTime}}</el-form-item>" +
        "<el-form-item label='审核结果:'><p style='width: 330px'>{{item.result}}</p></el-form-item></el-form></el-card>" +
        "<el-card v-if='!onlyHistory' class='box-card'><div slot='header' class='clearfix'><span style='line-height: 36px'>审核结果</span></div>" +
        "<el-form :model='examineForm' ref='examineForm' :rules='rules' :label-width='labelWidth'>" +
        "<el-form-item label='审核结果' prop='result'><el-radio-group style='margin-top: 8px' v-model='examineForm.result'>" +
        "<el-radio :label='1' :disabled='readonly'>通过</el-radio><el-radio :label='0' :disabled='readonly'>不通过</el-radio></el-radio-group></el-form-item>" +
        "<el-form-item lable='审核标签' v-if='examineForm.result === 0'>" +
        "<el-checkbox-group v-if='!readonly' v-model='checkTag' style='display: inline'>" +
        "<el-checkbox v-for='item in tags' :disabled='readonly' :label='item.name' name='tag' style='margin-left: 0;width: 100px;'></el-checkbox>" +
        "</el-checkbox-group><el-checkbox :label='999' v-model='other' v-if='!readonly' name='tag' style='margin-left: 0;width: 100px;'>其他</el-checkbox></el-form-item>" +
        "<el-form-item label='审核描述信息' v-if='(examineForm.result === 0 && isShow) || (examineForm.result === 0 && readonly)'>" +
        "<el-input type='textarea' :disabled='readonly' v-model='examineForm.desc'></el-input></el-form-item>" +
        "</el-form><slot name='content' v-if='examineForm.result === 1'></slot></el-card><div slot='footer' class='dialog-footer' style='text-align: center' v-if='!readonly || !onlyHistory'>" +
        "<el-button type='primary' @click.native.prevent='saveCallback'>保存</el-button>" +
        "<el-button @click.native.prevent='cancelCallback'>取消</el-button></div>" +
        "<div slot='footer' class='dialog-footer' v-else style='text-align: center'><el-button @click.native.prevent='cancelCallback'>返回</el-button></div></el-dialog>",
        props: {
            typeId: { // 标签类型Id
                type: Number,
                required: true
            },
            onlyHistory: {
                type: Boolean,
                default: false
            },
            readonly: { // 是否只读
                type: Boolean,
                default: false
            },
            examineDialog: { // 是否显示审核弹窗
                type: Boolean,
                default: false
            },
            checkedList: {
                type: Array,
                default () {
                    return [];
                }
            },
            historyResult : {
                type: Array,
                default () {
                    return [];
                }
            },
            title: {
                type: String,
                default: "审核"
            },
            saveCallback: { // 保存回调函数
                type: Function,
                required: true
            },
            cancelCallback: { // 取消回调函数
                type: Function,
                required: true
            },
            result: {
                type: Number,
                default: 1
            },
            labelWidth: {
                type: String,
                default: "120px"
            },
            desc: {
                type: String,
                default: ''
            },
            spreadSale: {
                type: String,
                default: ''
            }
        },
        data: function () {
            return {
                checkTag: this.checkedList,
                rules: {
                    spreadSale: [
                        {required: true, message: "分销金额不能为空"},
                        {type: "number", message: "分销金额只能为数字"}
                    ],
                    result: [
                        {required: true, message: "请选择审核结果"}
                    ]
                },
                examineForm: {
                    result: this.result, // 审核结果
                    desc: this.desc, // 审核描述
                    spreadSale: this.spreadSale // 分销金额
                },
                isShow: false,
                other: false,
                tags: []
            }
        },
        mounted: function () {
            this.getTags();
        },
        watch: {
            examineDialog: function (val, oldVal) {
                this.examineForm.desc = this.desc;
                this.examineForm.result = this.result;
                this.checkTag = this.checkedList;
            },
            other: function (val, oldVal) {
                if (val) {
                    this.isShow = true;
                    this.checkTag = [];
                } else {
                    this.isShow = false;
                }
            },
            checkTag: function (val, oldVal) {
                if (val.length !== 0) {
                    this.other = false;
                }
            }
        },
        methods: {
            // isShowDesc (e) {
            //     let checked = e.currentTarget.checked;
            //     if (checked) {
            //         this.checkTag = [];
            //         this.isShow = true;
            //     } else {
            //         this.checkTag = [];
            //         this.isShow = false;
            //     }
            // },
            getTags () {
                let that = this;
                this.http("/tags/getTagList", {type: this.typeId, isAll: 0}, function (res) {
                    if (res.status === 200) {
                        that.tags = res.data.tagList;
                    } else {
                        that.$alert('获取标签失败','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                }, function (res) {
                    that.$alert('获取标签失败','提示',{
                        confirmButtonText:'确定',
                    })
                })
            }
        }
    });
    Vue.component("yiqi-examine", examine);

})(Vue)